<!DOCTYPE html>
<html>
<head>
	<title>{$site_name}</title>
	<meta name="keywords" content="{$site_seo_keywords}"/>
	<meta name="description" content="{$site_seo_description}">
	<meta name="author" content="taosir">
	<tc_include file="Public:head"/>
	<style type="text/css">
		.tab-content{overflow: visible;}
		.uploaded_avatar_area{
			margin-top: 20px;
		}
		.uploaded_avatar_btns{
			margin-top: 20px;
		}
		.uploaded_avatar_area .uploaded_avatar_btns{display: none;}
		#usernav-header{
			background: #4B4F55;border-bottom: 1px solid #353A40;border-radius: 5px 5px 0 0;color: #fff;padding: 15px;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);font-size:1.5em;
		}
		#list-group{
			background: #fff;font-weight:bold;
		}
		#usernav-tab li a{
			color:#4b4f55;
			font-weight:bold;
		}
	</style>
</head>
<body class="body-white" id="top">
<tc_include file="Public:nav"/>
<div class="container tc-main">
	<div class="row">
		<div class="span2">
			<div id="usernav-header">个人中心</div>
			<div id="list-group">
				<a class="list-group-item " href="{:U('user/center/index')}"><i class="fa fa-info-circle fa-fw"></i> 基本信息</a>
				<a class="list-group-item" href="{:U('user/profile/edit')}"><i class="fa fa-list-alt fa-fw"></i> 修改资料</a>
				<a class="list-group-item" href="{:U('user/profile/password')}"><i class="fa fa-lock fa-fw"></i> 修改密码</a>
				<a class="list-group-item active" href="{:U('user/profile/avatar')}"><i class="fa fa-user fa-fw"></i> 编辑头像</a>
				<a class="list-group-item" href="{:U('user/profile/bang')}"><i class="fa fa-exchange fa-fw"></i> 绑定账号</a>
				<a class="list-group-item " href="{:U('portal/UserArticle/index')}"><i class="fa fa-file-text fa-fw"></i> 我的文章</a>
				<a class="list-group-item" href="{:U('user/favorite/index')}"><i class="fa fa-star-o fa-fw"></i> 我的收藏</a>
				<a class="list-group-item" href="{:U('comment/comment/index')}"><i class="fa fa-comments-o fa-fw"></i> 我的评论</a>
			</div>
		</div>
		<div class="span10">
			<div class="tabs">
				<ul class="nav nav-tabs" id="usernav-tab">
					<li class="active"><a href="#one" data-toggle="tab"><i class="fa fa-user"></i> 修改头像 </a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="one">
						<if condition="empty($avatar)">
							<img src="__TMPL__Public/assets/images/headicon_128.png" class="headicon"/>
							<else/>
							<img src="{:sp_get_user_avatar_url($avatar)}?t={:time()}" class="headicon"/>
						</if>
						<input type="file" onchange="avatar_upload(this)" id="avatar_uploder" name="file"/>
						<div class="uploaded_avatar_area">
							<div class="uploaded_avatar_btns">
								<a class="btn btn-primary confirm_avatar_btn" onclick="update_avatar()">确定</a>
								<a class="btn" onclick="reloadPage()">取消</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- /container -->
<tc_include file="Public:scripts"/>
<script type="text/javascript">
	function update_avatar(){
		var area=$(".uploaded_avatar_area img").data("area");
		$.post("{:U('profile/avatar_update')}",area,
				function(data){
					if(data.status==1){
						reloadPage(window);
					}
				},"json");
	}
	function avatar_upload(obj){
		var $fileinput=$(obj);
		/* $(obj)
		 .show()
		 .ajaxComplete(function(){
		 $(this).hide();
		 }); */
		Wind.css("jcrop");
		Wind.use("ajaxfileupload","jcrop","noty",function(){
			$.ajaxFileUpload({
				url:"{:U('profile/avatar_upload')}",
				secureuri:false,
				fileElementId:"avatar_uploder",
				dataType: 'json',
				data:{},
				success: function (data, status){
					if(data.status==1){
						$("#avatar_uploder").hide();
						var $uploaded_area=$(".uploaded_avatar_area");
						$uploaded_area.find("img").remove();
						var src= "__UPLOAD__avatar/"+data.data.file;
						var $img=$("<img/>").attr("src",src);
						$img.prependTo($uploaded_area);
						$(".uploaded_avatar_btns").show();
						var img = new Image();
						img.src=src;
						var callback=function(){
							console.log(img.width);
							$img.Jcrop({
								aspectRatio:1,
								trueSize: [img.width,img.height],
								setSelect: [ 0, 0, 100, 100 ],
								onSelect: function(c){
									$img.data("area",c);
								}
							});
						}
						if(img.complete){
							callback();
						}else{
							img.onload=callback;
						}
					}else{
						noty({text: data.info,
							type:'error',
							layout:'center'
						});
					}
				},
				error: function (data, status, e){}
			});
		});
		return false;
	}
</script>
</body>
</html>